<template>
  <div id="sellermine">

  	<flexbox orient="vertical">
      <flexbox-item>
      	<div class="userinfo">
      		<img class="headerimg" :src="userdata.headimgurl">
	  		<div class="h4 name">{{userdata.nickname}}</div>
			<div class="h5 level pb10">
				{{userdata.level_name}} / {{userdata.fx_levelname}}
			</div>
      	</div>
      </flexbox-item>
    </flexbox>

    <flexbox class="mt10">
      <flexbox-item >
      	<yd-grids-group class="qrcode" :rows="2">
	        <yd-grids-item>
	            <img slot="icon" src="./img/qrcode1.png">
	            <span slot="text" class="h5">货架二维码</span>
	        </yd-grids-item>
	        <yd-grids-item @click.native="invitation">
	            <img slot="icon" src="./img/qrcode1.png">
	            <span slot="text" class="h5">生成邀请函</span>
	        </yd-grids-item>
	    </yd-grids-group>
      </flexbox-item>
    </flexbox>  

    <flexbox >
    	<flexbox-item >
    		<yd-cell-group>
		        <yd-cell-item @click.native="account" arrow>
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/account.png" > -->
		            <span slot="left">账户</span>
		            <span slot="right">余额：¥ {{sellerminedata.price}}，总收益：¥ {{sellerminedata.incomeprice}}</span>
		        </yd-cell-item>
		        <yd-cell-item @click.native="goods" arrow>
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/goods.png" > -->
		            <span slot="left">货架</span>
		            <span slot="right">共：{{sellerminedata.salecount}} 件产品</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>
    </flexbox>  


    <flexbox >
    	<flexbox-item >
    		<yd-cell-group>
		        <yd-cell-item arrow @click.native="seller(1)">
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/seller.png" > -->
		            <span slot="left">下级分销商</span>
		            <span slot="right">{{sellerminedata.mydistributioncount}}</span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="seller(2)">
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/seller.png" > -->
		            <span slot="left">待审核分销商</span>
		            <span slot="right">
		            	<yd-badge v-if="sellerminedata.applycount != 0" type="danger">{{sellerminedata.applycount}}</yd-badge>
		            </span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="fans">
		        	<!-- <img slot="icon" class="mt5" src="./img/icon/fans.png" > -->
		            <span slot="left">粉丝</span>
		            <span slot="right">{{sellerminedata.fancount}}</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>
    </flexbox>  


    <flexbox >
    	<flexbox-item >
    		<yd-cell-group>
		        <!-- <yd-cell-item arrow @click.native="income">
		            <span slot="left">已经分佣的订单</span>
		        </yd-cell-item>
		        <yd-cell-item arrow @click.native="income">
		            <span slot="left">进行中的订单</span>
		        </yd-cell-item> -->
		        <yd-cell-item arrow @click.native="statistics">
		            <span slot="left">销售统计</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>
    </flexbox>  


    <flexbox >
    	<flexbox-item >
    		<yd-cell-group>
		        <yd-cell-item arrow>
		            <span slot="left">群盟教程</span>
		        </yd-cell-item>
		    </yd-cell-group>

    	</flexbox-item>
    </flexbox>  

     

  </div>

</template>

<script>

//import { Cell, Button, Badge, MessageBox} from 'mint-ui'
import { mapGetters } from 'vuex'
import wx from '../../util/weixin';
import QrcodeVue from 'qrcode.vue';
import { cutQueryString } from '../../util/util'

export default {
	name: 'Mine',

	data () {
		return {
			msg: '我的。。。。。。'
		}
	},

	computed : {
		...mapGetters([
			'company_code',
			'userdata',
			'sellerminedata',
		]),

		shareLink () {
			//如果链接里有u,则去掉
			var link = cutQueryString('u');
			//把页面换掉
			link = cutQueryString('mine', 'page', link, 'applyseller');
			//var link = cutQueryString('company_code');
			link += '&u=' + this.userdata.user_base;
			console.log(link);
			return link;
		}

	},

	methods : {
		orderlist () {
			console.log('orderlist');
			this.$router.push({ 
				'name': 'orderlist', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		seller (what) {
			console.log('分销商');
			console.log(what);

			this.$router.push({ 
				'name': 'sellerlist', 
				'query' : {
					'company_code' : this.company_code,
					'what' : what,
				}
			});
		},

		account () {
			this.$router.push({ 
				'name': 'account', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		goods () {
			console.log('goods');
			this.$router.push({ 
				'name': 'goods', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		fans () {
			this.$router.push({ 
				'name': 'fanslist', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},


		invitation () {
			console.log('邀请函');
			var para = {
				'poster_id' : '1',
				'title' : this.userdata.nickname,
				'qr_data' : this.shareLink,
			};
			console.log(para);

			this.$dialog.confirm({

				'title' : '自定义邀请函名字',

				'mes' : '<input id="pname" style="height: 1rem;border: none;font-size: .3rem;justify-content: flex-start;-webkit-box-align: center;align-items: center;text-align: left;vertical-align: baseline;border-radius: 0;"   placeholder="请输入邀请函名字">',

				'opts': [
					{
                        txt: '取消',
                        color: false,
                        callback: () => {
                            console.log('取消');
                        }
                    },
                    {
                        txt: '使用微信名',
                        color: false,
                        callback: () => {
                            console.log('用微信名');
							this._getposter(para);
                        }
                    },
                    {
                        txt: '确定',
                        color: true,
                        callback: () => {
                            console.log('自定义名字');
                            var tt = document.getElementById('pname').value;
					  		para.title = tt;
					  		this._getposter(para);
                        }
                    }
                ]
			});
		},

		statistics () {
			console.log('销售统计');
			this.$router.push({ 
				'name': 'statistics', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		income () {
			console.log('income');
			this.$router.push({ 
				'name': 'profitlist', 
				'params': { 
					'what': 'income',
				},
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},

		preincome () {
			this.$router.push({ 
				'name': 'profitlist', 
				'params': { 
					'what': 'preincome',
				},
				'query' : { 
					'company_code' : this.company_code,
				}
			});
		},


		

		_getposter (para) {
			wx.weixinPoster(this.company_code, para, (res) => {
				this.$dialog.confirm({
					'title' : '预览邀请函?',
					'opts': [
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                            }
                        },
                        {
                            txt: '确定',
                            color: true,
                            callback: () => {
                                wx.wexinPreviewImage(res.localId);
                            }
                        }
                    ]
				});
			}, () => {
				console.log('22222');
			});
		},
	},



	mounted () {
		

		this.$store.dispatch('getSellerMineData', {
			'company_code' : this.company_code,
		});

	}


}
</script>

<style scoped >


#sellermine {
	margin-bottom: 60px;
}

.userinfo {
	text-align: center;
	background-color: #fff;
	/*background-color: #5C6F97;*/
	/*background-color: #49607B;*/
}

.userinfo .headerimg {
	border-radius:50%;
	width: 55px;
	height: 55px;
	margin-top: 30px;
}

.userinfo .name {
	margin-top: 10px;
	/*color: #fff;*/
}

.userinfo .level {
	color: #aaa;
	/*color: #fff;*/
}

.qrcode {

}

/*.qrcode .goods, .qrcode .invitation  {
	width: 50%;
	text-align: center;
	float: left;
}*/

.qrcode img {
	width: 20px;
	height: 20px;
}


</style>
